<template>
  <view class="fill-item">
    <view class="fill-main">
      <view class="fill-warp">
        <view class="title">
          <text class="lable">
            填空题
          </text>
          <view v-if="question?.type === 1" class="input-text">
            <template v-for="(item, index) in question?.title" :key="index">
              <text v-if="item.type === 'text'" class="text">
                {{ item.content }}
              </text>
              <up-input
                v-else
                v-model="answerTextList[item.inputIndex || 0]"
                placeholder=""
                border="bottom"
                clearable
              />
            </template>
          </view>
          <text v-else class="text">
            {{ question?.title }}
          </text>
        </view>

        <view v-if="question?.type === 2" class="fill-content flex flex-col items-center">
          <view class="text-box">
            <text v-if="!answerList.length" class="text">
              请选择下面汉字组成答案吧
            </text>
            <text v-for="item in answerList" v-else :key="`${item.text}top`" class="text-item" @click="handleClick(1, item.text, item.index)">
              {{ item.text }}
            </text>
          </view>

          <view class="text-group flex flex-wrap justify-center">
            <text v-for="(item, index) in question?.content!.split(',')" :key="item" :class="[!item ? 'no-text' : 'text']" @click="handleClick(2, item, index)">
              {{ item }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts" name="FillItem">
import type { FillQuestion } from '@/pages/views/demo/type';

const props = defineProps({
  question: {
    type: Object as () => FillQuestion,
    default: () => {},
  },
});

const answerTextList = ref<Array<string>>([]);
const answerList = ref<Array<{ index: number; text: string }>>([]);

const handleClick = (type: number, text: string, index: number) => {
  if (!text)
    return;

  if (type === 1) {
    answerList.value = answerList.value.filter((item: { index: number; text: string }) => item.text !== text);
    const list = props.question.content!.split(',');
    list[index] = text;
    props.question.content! = list.join(',');
  }
  else {
    answerList.value.push({
      index,
      text,
    });
    const list = props.question.content!.split(',');
    list[index] = '';
    props.question.content! = list.join(',');
  }
};

const isPlay = ref<boolean>(false);
const fill = 'https://app5.shuguostar.cn/imgs/bookVido/audio/fill.mp3';
let innerAudioContext: any;
const playAudio = () => {
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.autoplay = true;
  innerAudioContext.src = fill;
  innerAudioContext.onPlay(() => {
    isPlay.value = true;
  });
  innerAudioContext.onEnded(() => {
    isPlay.value = false;
  });
};

const pauseAudio = () => {
  innerAudioContext?.destroy();
  innerAudioContext = null;
};

watch(() => props.question?.id, () => {
  answerTextList.value = [];
  answerList.value = [];
  playAudio();
}, { deep: true });

defineExpose({
  answerList,
  answerTextList,
  pauseAudio,
});
</script>

<style lang="scss" scoped>
.fill-item {
  width: 100%;

  .fill-main {
    width: 100%;
    position: relative;
    margin: 84rpx 0 200rpx 0;
    z-index: 2;

    &::before {
      content: '';
      position: absolute;
      left: 30rpx;
      bottom: -28rpx;
      height: 200rpx;
      width: 626rpx;
      background: rgba(51,51,51,0.4);
      border-radius: 48rpx;
      z-index: -1;
      transform: translateZ(-2rpx);
    }

    &::after {
      content: '';
      position: absolute;
      left: 60rpx;
      bottom: -50rpx;
      height: 200rpx;
      width: 566rpx;
      background: rgba(51,51,51,0.2);
      border-radius: 40rpx;
      z-index: -1;
    }

    .fill-warp {
      min-height: 600rpx;
      padding: 48rpx 32rpx;
      background: #fff;
      border-radius: 48rpx;

      .title {
        padding-bottom: 42rpx;

        .lable {
          display: inline-block;
          margin: 6rpx 16rpx 6rpx 0;
          padding: 0 16rpx;
          font-size: 24rpx;
          line-height: 48rpx;
          color: #fff;
          background: #22BF57;
          border-radius: 0 24rpx 24rpx 0;
        }

        .input-text {
          display: inline;
        }

        .text {
          padding: 6rpx 0;
          font-size: 32rpx;
          line-height: 48rpx;
          color: #333;
        }
      }

      .fill-content {
        padding: 80rpx 40rpx;

        .text-box {
          width: 100%;
          height: 74rpx;
          padding: 6rpx 10rpx;
          border-bottom: 2rpx solid #797979;

          .text {
            display: block;
            font-size: 24rpx;
            text-align: center;
            line-height: 32rpx;
            color: #C1BFBF;
          }

          .text-item {
            display: inline-block;
            width: 60rpx;
            height: 60rpx;
            font-size: 28rpx;
            line-height: 56rpx;
            text-align: center;
            color: #555;
            border: 2rpx solid #555;
            border-radius: 8rpx;
            margin: 0 8rpx;
          }
        }

        .text-group {
          padding-top: 80rpx;

          .text {
            width: 60rpx;
            height: 60rpx;
            font-size: 28rpx;
            line-height: 56rpx;
            text-align: center;
            color: #555;
            border: 2rpx solid #555;
            border-radius: 8rpx;
            margin: 0 8rpx;
          }

          .no-text {
            width: 60rpx;
            height: 60rpx;
            margin: 0 8rpx;
            border-radius: 8rpx;
            background: #ddd;
          }
        }
      }
    }
  }
}
</style>
